<template>
  <div class="person">
    <!-- 
      07 toRefs和toRef

      把reactive定义的对象变成一个由ref定义的对象,并且跟对象中的数据数有关联的
      一般在 解构赋值的时候使用
     -->
     <h2>姓名: {{ person.name }}</h2>
     <h2>年龄: {{ person.age }}</h2>

     <button @click="changeName">点击修改姓名</button>
     <button @click="changeAge">点击修改年龄</button>

  </div>
</template> 

<script setup lang="ts" name="Pserson234">
import { reactive, toRefs, toRef } from 'vue'
let person = reactive({
  name: '张三',
  age: 18
})

// 利用 解构赋值
// let { name, age } = person  // ===> 这样写 类似于 浅拷贝, 
// 拷贝出来的name和age 与person中的不是同一个数据,修改name,age 页面person中的name,age不更新
// let name = person.name
// let age = person.age
  
// 把reactive定义的对象变成一个由ref定义的对象,并且跟person中的数据数有关联的
let {name,age} = toRefs(person)  // // let name = ref(xxx)

let nl = toRef(person, 'age')
console.log(nl,nl.value)

const changeName = () => {
  name.value += '~'
  console.log(name, person.name)
}

const changeAge = () => {
  age.value += 1
  console.log(age, person.age)
}



</script>
<style>
.person {
  background-color: blue;
  box-shadow: 0 0 10px;
  padding: 20px;
}
button {
  margin: 0 5px;

}
</style>